/* 
    Document   : main
    Created on : Jul 19, 2013, 10:26:57 AM
    Author     : Admin
*/
html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    margin: 0px;
    overflow: hidden;
}

#Application-Main{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
    overflow: hidden;        
}
*{
    -webkit-user-select: none;
}
.joo-stage{
    position: relative;
    -webkit-backface-visibility: hidden;
}

#loading-state{
    background: rgb(177, 149, 198);
    -webkit-backface-visibility: visible;
}
#landing-state{
    background: transparent;
    /*background-image: url(../res/landing-state/background.jpg); */
    background-repeat: no-repeat;
    display: none;
}
#menu-state{
    background: appworkspace;
    background-image: url(../res/menu-state/Mario-Background.jpg); 
    background-size: 239%;
    background-repeat: no-repeat;        
    
}
.wrapper-landing-state{
    width: 100%;
    position: relative;
}
.joo-gem{
    width: 37px;
    height:37px;
    display: block;
    position: absolute;        
    cursor: pointer;
/*    -webkit-user-select: none;*/
    -webkit-user-drag: none;
    -webkit-backface-visibility: hidden;
    box-sizing: border-box;
    overflow: hidden;
}
.joo-gem-select:before{
    /*opacity:0.8;
    border: 2px solid white;    */
    -webkit-animation: pulse 0.8s ease-out ;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation: pulse 0.8s ease-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay:2s;
}
.joo-gem:before{
    content: '';
    background: white;
    display: block;
    height: 2px;
    opacity: 0.1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(0);
    /* -webkit-filter: blur(1px);*/
    -moz-transform-origin: 50% 50%;
    -moz-transform: scale(0);
    /*-moz-filter: blur(1px); */
    /*filter: blur(1px); */
    width: 50px;
    box-sizing: border-box;
    margin: 50% auto 0 auto;
    position: relative;        
}

.joo-joobutton{
    display: block;
    position: relative;
    background-repeat: no-repeat;
}
.play-button{
    background: url(../res/menu-state/play-button.png);
    width: 58px;
    top: 150px;
    height: 29px;
    border-radius: 55px;
    border: 1px solid transparent;
    background-position: -4px -2px;
    margin: 0 auto;
}
.connect-button{
    background: url(../res/menu-state/connect-button.png);
    height: 30px;
    width: 130px;
    border: 1px solid transparent;
    border-radius: 30px;
    background-position: -2px -2px;
    margin: 0 auto;
}
@-webkit-keyframes pulse{
    70%{
        -webkit-transform:scale(10);
        /*opacity: 0.5;         */
    }
}
@-moz-keyframes pulse{
    70%{
        -moz-transform:scale(10);
        /*opacity: 0.5;*/
    }
}
#landing-state{
    background: transparent url(../res/landing-state/background.jpg) no-repeat;
}
.wrapper-landing-state{
    overflow: hidden;
    height: 301px;
    width: 283px;
    top: 50% !important;
    left: 50% !important;
    position: absolute;
    margin-top: -150px;
    margin-left: -141px;
}
.joo-brick{
    background: transparent url(../res/landing-state/brick.png) no-repeat;
}